extends ../common/layout
block content
  section#content
    section.hbox.stretch
      section
        section.vbox
          section#bjax-target.scrollable.padder-lg.w-f-md
            a.pull-right.text-muted.m-t-lg(href='#', data-toggle='class:fa-spin')
              i#refresh.icon-refresh.i-lg.inline
            h2.font-thin.m-b 推荐
              span.musicbar.animate.inline.m-l-sm(style='width:20px;height:20px')
                span.bar1.a1.bg-primary.lter
                span.bar2.a2.bg-info.lt
                span.bar3.a3.bg-success
                span.bar4.a4.bg-warning.dk
                span.bar5.a5.bg-danger.dker
            .row.row-sm
              each mp3 in mp3s
                .col-xs-6.col-sm-4.col-md-3.col-lg-2
                  .item
                    .pos-rlt
                      .item-overlay.opacity.r.r-2x.bg-black
                        .center.text-center.m-t-n
                          a(href='#{mp3.mp3}',data-toggle='class')
                            i.icon-control-play.i-2x.text
                            i.icon-control-pause.i-2x.text-active
                      img.r.r-2x.img-full(src='#{mp3.poster}', alt='')
                    .padder-v
                      a.text-ellipsis(href='#') #{mp3.title}
                      a.text-ellipsis.text-xs.text-muted(href='#') #{mp3.artist}
          footer.footer.bg-dark
            #jp_container_N
              .jp-type-playlist
                #jplayer_N.jp-jplayer.hide
                .jp-gui
                  .jp-video-play.hide
                    a.jp-video-play-icon play
                  .jp-interface
                    .jp-controls
                      div
                        a.jp-previous
                          i.icon-control-rewind.i-lg
                      div
                        a.jp-play
                          i.icon-control-play.i-2x
                        a.jp-pause.hid
                          i.icon-control-pause.i-2x
                      div
                        a.jp-next
                          i.icon-control-forward.i-lg
                      .hide
                        a.jp-stop
                          i.fa.fa-stop
                      div
                        a(data-toggle='dropdown', data-target='#playlist')
                          i.icon-list
                      .jp-progress.hidden-xs
                        .jp-seek-bar.dk
                          .jp-play-bar.bg-info
                          .jp-title.text-lt
                            ul
                              li
                      .hidden-xs.hidden-sm.jp-current-time.text-xs.text-muted
                      .hidden-xs.hidden-sm.jp-duration.text-xs.text-muted
                      .hidden-xs.hidden-sm
                        a.jp-mute(title='mute')
                          i.icon-volume-2
                        a.jp-unmute.hid(title='unmute')
                          i.icon-volume-off
                      .hidden-xs.hidden-sm.jp-volume
                        .jp-volume-bar.dk
                          .jp-volume-bar-value.lter
                      div
                        a.jp-shuffle(title='shuffle')
                          i.icon-shuffle.text-muted
                        a.jp-shuffle-off.hid(title='shuffle off')
                          i.icon-shuffle.text-lt
                      div
                        a.jp-repeat(title='repeat')
                          i.icon-loop.text-muted
                        a.jp-repeat-off.hid(title='repeat off')
                          i.icon-loop.text-lt
                      .hide
                        a.jp-full-screen(title='full screen')
                          i.fa.fa-expand
                        a.jp-restore-screen(title='restore screen')
                          i.fa.fa-compress.text-lt
                #playlist.jp-playlist.dropup
                  ul.dropdown-menu.aside-xl.dker
                    // The method Playlist.displayPlaylist() uses this unordered list
                    li.list-group-item
      // side content
      aside#sidebar.aside-md.bg-light.dk
        section.vbox.animated.fadeInRight
          section.w-f-md.scrollable.hover
            h4.font-thin.m-l-md.m-t 新用户
            ul.list-group.no-bg.no-borders.auto.m-t-n-xxs
              each i in [1,2,3,4]
                li.list-group-item
                  span.pull-left.thumb-xs.m-t-xs.avatar.m-l-xs.m-r-sm
                    img.img-circle(src='/images/f1.jpg', alt='...')
                    //-i.on.b-light.right.sm 用户状态
                  .clear
                    div
                      a(href='#') Chris Fox
                    small.text-muted New York
          footer.footer.footer-md.bg-black
            form(role='search')
              .form-group.clearfix.m-b-none
                .input-group.m-t.m-b
                  span.input-group-btn
                    button.btn.btn-sm.bg-empty.text-muted.btn-icon(type='submit')
                      i.fa.fa-search
                  input.form-control.input-sm.text-white.bg-empty.b-b.b-dark.no-border(type='text', placeholder='搜索歌曲...')

